<template>
  <transition name="slide-fade">
    <div class="image-preview" v-if="hide">
      <el-icon class="close" @click="hide = false"><Close /></el-icon>
      <vue-office-excel :src="pdfUrl" style="z-index: 2010" />
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/excel/lib/index.css";

const pdfUrl = ref<any>();
const hide = ref<boolean>(false);

const show = async (url: string | undefined) => {
  pdfUrl.value = url;
  hide.value = true;
};

defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.close {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 9999;
  font-size: 28px;
  color: red;
  cursor: pointer;
  &:hover {
    font-weight: bold;
  }
}
.image-view-hide {
  display: none;
}
.image-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000;
}
</style>
